<template>
    <table border="1">
        <h2>显示列表</h2>
        <thead>
            <tr>
                <td>会员等级编号</td>
                <td>会员等级名称</td>
                <td>会员等级状态</td>
                <td>最小成长值</td>
                <td>最大成长值</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in info">
                <td>{{item.Rank_Id}}</td>
                <td>{{item.Rank_Name}}</td>
                <td>{{item.Rank_State}}</td>
                <td>{{item.Rank_MinPoint}}</td>
                <td>{{item.Rank_MaxPoint}}</td>
                <td>
                    <input type="button" value="删除" @click="DelUser(item.Rank_Id)"/>
                     <input type="button" value="修改" @click="UpdUser(item.Rank_Id)"/>
                </td>
            </tr>
        </tbody>
    </table>
</template>
<script setup lang="ts">

    import {ref,onMounted} from 'vue';
    import axios from 'axios';
    import {useRoute,useRouter} from 'vue-router'

    const route=useRoute();
    const router=useRouter();

    const info=ref([{
        Rank_Id:0,
         Rank_Name: "",
         Rank_State: true,
         Rank_MinPoint: 0,
         Rank_MaxPoint: 0
    }]);

    onMounted(()=>{
        Get();
    })

    const Get=()=>{
        axios.get("https://localhost:7153/api/Member/ShowMamberRank/ShowMamberRank")
        .then(res=>{
            info.value=res.data;
        })
        .catch(err=>{
            console.log(err);
        })
    }

    const DelUser=(UId:number)=>{
       if(confirm("确定删除吗？")){
         axios.get("https://localhost:7153/api/Member/DeleteMemberRank/DeleteMemberRank",{
            params:{
                MRid:UId
            }
        })
        .then(res=>{
            if(res.data>0){
                alert('删除成功');
                Get();
            }
            else{
                alert('删除失败');
            }
        })
       }
    }
    //修改跳转
    const UpdUser=(UId:number)=>{
        router.push({
            name:"UpdUser",
            params:{
                id:UId
            }
        })
    }

</script>
